<template>
  <div class="box1" id="box1">
    <div
      class="hello"
      id="hello"
      v-on:touchstart="bodyTouchStart"
      v-on:touchend="bodyTouchEnd"
    >
      <!-- <div class="wraper" style="color:red">
        我是蒙层
      </div> -->

      <div class="wraper1" v-show="this.isshow">我是111</div>

      <iframe
        class="isIframe"
        id="isIframe"
        src="https://cn.vuejs.org/v2/guide/installation.html"
        frameborder="0"
      ></iframe>
    </div>
  </div>
</template>

<script>
// function debounce(fn, delay) {
//   let timer = null //借助闭包
//   return function() {
//     if (timer) {
//       clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
//       timer = setTimeout(fn, delay)
//     } else {
//       timer = setTimeout(fn, delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
//     }
//   }
// }
export default {
  name: 'HelloWorld',
  data() {
    return {
      isshow: false,
    }
  },
  props: {
    msg: String,
  },
  mounted() {
    const dom = document.getElementById('box1')
    console.log('dom', dom)
    dom.addEventListener(
      'scroll',
      () => {
        console.log('开始')
      },
      true
    )

    var frameWidow = document.getElementById('isIframe').contentWindow
    frameWidow.Window.focus = function() {
      console.log(11)
    }
    frameWidow.Window.blur = function() {
      console.log(12)
    }
    console.log('frameWidow', frameWidow.document)
    const body = document.getElementsByTagName('body')
    console.log('body', body)
    // frameWidow.addEventListener('scroll', function() {
    //   console.log(1111)
    // })
    // console.log(111)
    //this.fncccc()
    // window.addEventListener('touchstart', () => {
    //   console.log(31000000, this)
    //   this.isshow = true
    // })
    // window.addEventListener('touchend', () => {
    //   console.log(555555, this)
    //   this.isshow = false
    // })
    // setInterval(() => {
    //   const ele = document.activeElement

    //   if (ele && ele.tagName == 'IFRAME') {
    //     this.isshow = true
    //   } else {
    //     console.log('false')
    //     this.isshow = false
    //   }
    // }, 100)
    console.log(33, window)
  },
  methods: {
    fncccc() {
      window.addEventListener('blur', function() {
        //alert(100)
      })
      // window.addEventListener('touchstart', function() {
      //   console.log(310)
      //   this.isshow = false
      //   console.log(33, this.isshow)
      // })
    },
    clickfunc() {
      console.log('11000')
      this.isshow = false
    },
    bodyTouchStart() {
      console.log('6')

      this.isshow = true
      // debounce(() => {
      //   this.isshow = false
      // }, 5000)
      // setTimeout(() => {
      //   this.isshow = false
      // }, 5000)
    },
    bodyTouchEnd() {
      console.log('2')
      this.isshow = false
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box1 {
  height: 100%;
}
.hello {
  height: 3000px;

  position: relative;
}
.wraper {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
}
.textColor {
  color: red;
}
.wraper1 {
  position: absolute;
  bottom: 0px;
  height: 30px;
  background: red;
  width: 100%;
}
.isIframe {
  height: 100%;

  width: 100%;
  background: rebeccapurple;
}
</style>
